<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>评分名称:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <el-autocomplete
          class="inline-input"
          v-model="state1"
          :fetch-suggestions="querySearch"
          placeholder="请输入学生姓名"
          size="small"
        ></el-autocomplete>
        <el-button type="primary" size="small">搜索</el-button>
        <el-button type="primary" size="small">导出</el-button>
        <div class="right">
          <el-button type="success" @click="upshow()" size="small">新建</el-button>
        </div>
      </div>
    </div>
    <div class="model management">
      <img :src="IMGBASE64.JIFENDENGJI2X" class="pink">
    	<span class="title">积分登记</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="tablemsg" style="width: 100%" @cell-click="showDetails">
    			<el-table-column prop="type" label="评分名称" align="center"></el-table-column>
    			<el-table-column prop="fraction" label="分数" align="center"></el-table-column>
    			<el-table-column prop="bpr" label="被评人" align="center"></el-table-column>
    			<el-table-column prop="grade" label="年级" align="center" width="80"></el-table-column>
    			<el-table-column prop="class" label="班级" align="center" width="80"></el-table-column>
    			<el-table-column prop="neir" label="评价内容" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="raters" label="评分人" align="center"></el-table-column>
    			<el-table-column prop="time" label="评分时间" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="status" label="状态" align="center"></el-table-column>
    			<el-table-column label="操作" align="center">
    				<template scope="scope">
    					<el-button size="small">撤销</el-button>
    				</template>
    			</el-table-column>
    		</el-table>
    	</template>
    </div>

    <div class="up" v-show="upShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新建积分登记</span>
      <el-button icon="el-icon-close" class="close" @click="upshow()"></el-button>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <div class="kong1"></div>
      <el-form ref="form" :model="form" label-width="105px">
        <el-col :span="12">
          <el-form-item label="加减分选择">
            <el-select v-model="value" placeholder="请选择" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评分名称">
            <el-select v-model="value" placeholder="请选择" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="被评人">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
	        <el-form-item label="评分内容">
	          <el-input type="textarea" v-model="form.id" :rows="4"></el-input>
	        </el-form-item>
        </el-col>
        <el-col :span="2">
          <div class="kong"></div>
        </el-col>
        <el-col :span="22">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :auto-upload='false'
            :multiple='true'
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog v-model="dialogVisible" :modal-append-to-body="false" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-col>
      </el-form>
      <el-col :span="24">
        <div class="bottom">
          <div class="left">
            <el-checkbox v-model="checked">继续新建</el-checkbox>
          </div>
          <div class="right">
            <el-button type="success" size="small">确定</el-button>
            <el-button @click="upshow" size="small">取消</el-button>
          </div>
        </div>
      </el-col>
    </div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <el-form label-width="80px">
          <el-col :span="24">
            <el-form-item label="被评人">
              <span>{{detailsForm.bpr}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="评分名称">
              <span>{{detailsForm.type}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分数">
              <span>{{detailsForm.fraction}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评分人">
              <span>{{detailsForm.raters}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评分时间">
              <span>{{detailsForm.time}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="评价内容">
              <span>{{detailsForm.neir}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      checked: false,
      upShow: false,
      isSuccess: false,
      dialogImageUrl: null,
      dialogVisible: false,
      isDetails: false,
      value: null,
      state1: null,
      options: [],
      num1: '3',
      form: {
        name: null,
        phone: null,
        id: null,
        grade: null,
        grademsg: [{
          value: '一年级'
        },
        {
          value: '二年级'
        }],
        subject: null,
        subjectmsg: [{
          value: '数学'
        },
        {
          value: '语文'
        }],
        identity: null,
        identitymsg: [{
          value: '刺客'
        },
        {
          value: '战士'
        },
        {
          value: '魔法师'
        },
        {
          value: '道士'
        }],
        address: null
      },
      tablemsg: [
        {
          id: '1',
          type: '仪容仪表',
          fraction: '+1',
          bpr: '欧阳俊逸',
          grade: '二年级',
          class: '3',
          neir: '资料没有按时上传',
          raters: '欧阳俊逸',
          time: '2016/03/23 12:23:34',
          status: '有效'
        },
        {
          id: '2',
          type: '仪容仪表',
          fraction: '-1',
          bpr: '欧阳俊逸',
          grade: '二年级',
          class: '3',
          neir: '资料没有按时上传',
          raters: '欧阳俊逸',
          time: '2016/03/23 12:23:34',
          status: '有效'
        },
        {
          id: '3',
          type: '仪容仪表',
          fraction: '+1',
          bpr: '欧阳俊逸',
          grade: '二年级',
          class: '3',
          neir: '资料没有按时上传',
          raters: '欧阳俊逸',
          time: '2016/03/23 12:23:34',
          status: '无效'
        }
      ],
      detailsForm: {
        bpr: null,
        fraction: null,
        type: null,
        raters: null,
        time: null,
        neir: null
      }
    }
  },
  mounted () {
  },
  methods: {
    handleClick () {
      console.log('1')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    upshow () {
      this.upShow = !this.upShow
      this.isSuccess = !this.isSuccess
    },
    detailsShow () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.bpr = rows.bpr
        this.detailsForm.fraction = rows.fraction
        this.detailsForm.type = rows.type
        this.detailsForm.raters = rows.raters
        this.detailsForm.time = rows.time
        this.detailsForm.neir = rows.neir
        this.isDetails = !this.isDetails
        this.isSuccess = !this.isSuccess
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .kong1{
    padding: 10px;
  }
  .el-form-item{
    padding-bottom: 8px;
  }
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      &-text{
				width: 18%;
				border: 0;
				margin-left: 10%;
				border-bottom: 1px solid #D7D7D7;
			}
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        margin-right: 5%;
      }
      .right{
        width: 10%;
        float: right;
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
  }

  .close{
    position: absolute;
    right: 2%;
  }
  .modal-backdrop{
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: .5;
  }
  .up{
    width: 65%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -40%;
    background: #fff;
    background: #FFF;
    margin-top: 50px;
    border-radius: 5px;
    padding: 20px 20px 0 20px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    z-index: 99999;
    .img{
      position: absolute;
      left: 24px;
      top: -25px;
    }
    .title{
      margin-left: 96px;
    }
    .header{
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 3%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
    }
  }
</style>
